<template>
	<view class="orderTimeBox">
		<view class="titleBox">
			  <text class="title">{{ title }}</text> <!-- 动态渲染标题 -->
			<view class="notBlock"></view>
			<text class="notLabel">不可预约</text>
			<view class="canBox">
				<view class="canBlock"></view>
				<text class="canLabel">已选择</text>
			</view>
		</view>
		<view class="dateBox">
			<text class="month">{{ monthValue }}</text>
			<view class="triangle"></view>
			<view class="line"></view>
			<scroll-view class="dateScrollBox" scroll-x="true" :scroll-into-view="dateId">
				<view class="dateItem" :class="dateIndex === index ? 'dateActive' : ''" :id="`item-${index}`"
					v-for="(item, index) in dateArr" :key="index" @click="selDate(index)">
					{{ item }}
				</view>
			</scroll-view>
			<uni-section class="selecteMonth">
				<uni-data-select v-model="monthValue" :localdata="month" @change="changeMonth" />
			</uni-section>
		</view>
		<view class="timeBox">
			<scroll-view class="timeScrollBox" scroll-x="true" :scroll-into-view="timeId">
				<view class="timeItem" :class="{ tiemActive: timeIndex === index, timeDisable: !item.status }"
					:id="`item-${index}`" v-for="(item, index) in timeArr" :key="index"
					@click="selTime(index, item.status)">
					{{ item.time_frame }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			serviceId: {
				type: String,
				required: true,
			},
			month: {
				type: Array,
				default: () => [],
			},
			yearArr: {
				type: Array,
				default: () => [],
			},
			title: {
			      type: String,
			      default: '预定上门时间', // 默认值
			    },
		},
		data() {
			return {
				monthValue: '',
				dateArr: [],
				timeArr: [],
				dateIndex: -1,
				timeIndex: -1,
				dateId: '',
				timeId: '',
				nextMonth: 0,
				service_data: '',
			};
		},
		created() {
			console.log('getDateRanges:', typeof this.$getDateRanges); // 检查方法是否挂载
			if (this.month && this.month.length > 0 && this.month[0].text) {
				this.initData();
			}
		},
		watch: {
			month: {
				immediate: true,
				handler(newVal) {
					if (newVal && newVal.length > 0 && newVal[0].text) {
						this.initData();
					}
				},
			},
		},
		methods: {
			initData() {
				const dateRanges = this.$getDateRanges();
				console.log('dateRanges:', dateRanges); // 检查返回值
				this.dateArr = dateRanges.currentMonthDates;
				console.log('dateArr:', this.dateArr); // 检查赋值结果
				this.monthValue = this.month[0].text;
				this.service_data = this.yearArr[0] + '-' + this.dateArr[0].toString().padStart(2, '0');
				this.getTime();
			},
			async getTime() {
				try {
					const res = await this.$request.post('time_frame_list', {
						service_data: this.service_data,
						server_id: this.serviceId,
					});
					this.timeArr = res.data.data;
				} catch (error) {
					console.error('获取时间失败', error);
				}
			},
			selTime(index, status) {
				if (!status) {
					this.$toast('当前时间不可选');
					return;
				}
				this.timeIndex = index;
				this.$emit('time-selected', this.timeArr[index].time_frame);
			},
			selDate(index) {
				this.dateIndex = index;
				this.date = this.dateArr[index];
				this.timeIndex=-1;
				this.service_data = this.yearArr[this.nextMonth] + '-' + this.date.toString().padStart(2, '0');
				this.$emit('date-selected', this.date, this.service_data); // 传递 date 和 service_data
				this.getTime();
			},
			changeMonth(e) {
				this.timeIndex = -1;
				this.dateIndex = -1;
				this.nextMonth = e;
				const dateRanges = this.$getDateRanges();
				this.dateArr = e === 0 ? dateRanges.currentMonthDates : dateRanges.nextMonthDates;
				this.service_data =
					this.yearArr[this.nextMonth] + '-' + this.dateArr[0].toString().padStart(2, '0');
				this.monthValue = this.month[e].text;
				this.getTime();
				this.dateId = 'item-0';
				this.timeId = 'item-0';
				setTimeout(() => {
					this.dateId = '';
					this.timeId = '';
				}, 1000);
				this.$emit('month-changed', e);
			},
		},
	};
</script>
<style lang="scss" scoped>
	.orderTimeBox {
		width: 750rpx;
		background: #ffffff;
		padding: 60rpx 40rpx 75rpx 40rpx;
		border-top: 25rpx solid #f0f0f0;
		border-bottom: 25rpx solid #f0f0f0;

		.titleBox {
			width: 670rpx;
			display: flex;
			align-items: center;
			padding-bottom: 53rpx;
			border-bottom: 1rpx solid #121212;

			.title {
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
			}

			.notBlock {
				width: 17rpx;
				height: 17rpx;
				background: #f0f0f0;
				margin-left: 265rpx;
			}

			.notLabel {
				font-weight: 500;
				font-size: 20rpx;
				color: #8e8e8e;
				margin-left: 14rpx;
			}

			.canBox {
				display: flex;
				align-items: center;
				margin-left: auto;

				.canBlock {
					width: 17rpx;
					height: 17rpx;
					background: #ff6e5d;
				}

				.canLabel {
					font-weight: 500;
					font-size: 20rpx;
					color: #121212;
					margin-left: 14rpx;
				}
			}
		}

		.dateBox {
			position: relative;
			width: 670rpx;
			display: flex;
			align-items: center;
			padding-top: 58rpx;
			padding-bottom: 58rpx;
			border-bottom: 1rpx solid #121212;

			.selecteMonth {
				position: absolute;
				left: 0rpx;
				width: 120rpx;
				height: 50%;
			}

			.dateScrollBox {
				margin-left: 54rpx;
				display: flex;
				white-space: nowrap;
				overflow-x: scroll;

				.dateItem {
					width: 80rpx;
					height: 80rpx;
					border: 1rpx solid #121212;
					border-radius: 50%;
					display: flex;
					font-weight: 500;
					font-size: 26rpx;
					color: #121212;
					align-items: center;
					justify-content: center;
					margin-right: 33rpx;
					flex: 0 0 auto;
					box-sizing: border-box;
					display: inline-flex;
				}

				.dateActive {
					background: #ff6e5d;
					color: #ffffff;
					border: 1rpx solid #ff6e5d;
				}
			}

			.line {
				width: 1rpx;
				height: 44rpx;
				background: #c7c7c7;
				margin-left: 50rpx;
			}

			.triangle {
				width: 24rpx;
				height: 18rpx;
				background: #121212;
				clip-path: polygon(0 0, 100% 50%, 0 100%);
			}

			.month {
				width: 150rpx;
				text-align: center;
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
				white-space: nowrap;
			}
		}

		.timeBox {
			width: 670rpx;
			display: flex;
			align-items: center;
			padding-top: 58rpx;

			.timeScrollBox {
				overflow-x: scroll;
				display: flex;
				white-space: nowrap;

				.timeItem {
					font-weight: 500;
					font-size: 26rpx;
					color: #121212;
					margin-right: 75rpx;
					flex: 0 0 auto;
					display: inline-flex;
				}

				.tiemActive {
					color: #ff6e5d;
					font-weight: 900;
				}

				.timeDisable {
					color: #8e8e8e;
				}
			}
		}
	}
</style>